<template>
    <div class="userinfo">
        <div class="headMsg">
            <p>
                <span class="infoTag"></span>取证信息
                <span class="infoRight">
                    <el-button type="primary" @click="dumpPage">
                        <svg-icon style="margin-right: 3px" iconName="icon-iconfontzhizuobiaozhun023146"></svg-icon>
                        下载证书
                    </el-button>
                    <el-button @click="dumpPage">文件预览</el-button>
                </span>

            </p>
            <div class="box-msg">
                <div class="box-list">
                    <el-descriptions :column="2" min-width="520px">
                        <el-descriptions-item min-width="520px" label="取证名称 :">我的作品</el-descriptions-item>
                        <el-descriptions-item min-width="520px" label="取证类型 :">网页取证</el-descriptions-item>
                        <el-descriptions-item min-width="520px" label="取证主题 :">spoli</el-descriptions-item>
                        <el-descriptions-item min-width="520px" label="身份证 :">440125656888956233</el-descriptions-item>
                        <el-descriptions-item min-width="520px" label="文件名称 :">作品.png</el-descriptions-item>
                        <el-descriptions-item min-width="520px" label="文件大小 :">15.73KB</el-descriptions-item>
                        <el-descriptions-item min-width="520px" label="文件类型 :">图片文件</el-descriptions-item>
                        <el-descriptions-item min-width="520px" label="备注信息 :">
                            <span>-</span>
                            <span class="editIcon" style="">
                                <el-icon size="16px" color="#3770cc">
                                    <Edit />
                                </el-icon>
                            </span>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
        </div>
        <div class="footMsg">
            <p>
                <span class="infoTag"></span>链上信息
            </p>
            <!-- 存在认证信息 -->
            <div class="box-foot" v-if="userInfoMsg.name">
                <el-descriptions :column="2">
                    <el-descriptions-item width="520px" label="取证编号 :">CZ20210628111223124</el-descriptions-item>
                    <el-descriptions-item width="520px" label="取证状态 :">成功</el-descriptions-item>
                    <el-descriptions-item width="520px" label="取证时间 :">2021-04-23 17:32:26</el-descriptions-item>
                    <el-descriptions-item width="520px" label="区块高度 :">28943981</el-descriptions-item>
                    <el-descriptions-item label="取证Hash :" :span="2">
                        a5c1f5765fc3aeabc13dee398b986dc03704500555f2f26ab9b0a870a7dc27bb
                    </el-descriptions-item>
                    <el-descriptions-item label="文件Hash :" :span="2">
                        a5c1f5765fc3aeabc13dee398b986dc03704500555f2f26ab9b0a870a7dc27bb
                    </el-descriptions-item>
                    <!-- <el-descriptions-item label="电子邮件 :">40080@qq.com</el-descriptions-item>
                    <el-descriptions-item label="身份证人像面 :">
                        <div class="demo-image">
                            <div class="block">
                                <el-image style="width: 160px; height: 100px"
                                    src="https://ts2.cn.mm.bing.net/th?id=OIP-C.Lf2u2dPln44gRiIC7IR3IwHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2"
                                    fit="scale-down" />
                            </div>
                        </div>
                    </el-descriptions-item> -->
                    <!-- <el-descriptions-item label="身份证国徽面 :">
                        <div class="demo-image">
                            <div class="block">
                                <el-image style="width: 160px; height: 100px"
                                    src="https://ts2.cn.mm.bing.net/th?id=OIP-C.Lf2u2dPln44gRiIC7IR3IwHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2"
                                    fit="scale-down" />
                            </div>
                        </div>
                    </el-descriptions-item> -->
                </el-descriptions>
            </div>
            <!-- 不存在认证信息 -->
            <div class="box-foot" v-else>
                <el-empty
                    image="https://www.axured.cn/assets/axurefiles/cd1bba2356076c2843e405e9e753b8f7_942/images/%E7%94%A8%E6%88%B7%E8%AF%A6%E6%83%85-%E6%9C%AA%E8%AE%A4%E8%AF%81/u4327.svg"
                    style="height: 250px;text-align: center;" description="当前用户暂未申请认证" />
            </div>
        </div>
        <div v-show="visible1" class="patter"
      style="width:500px;height:650px;position: absolute;top:10%;left:30%;z-index:1000;">
      <div ref="poster" id="postt" style="width:450px;height:600px;overflow: hidden;">
        <div
          style="font-size: 10px;border:1px solid red;border-radius: 50%;width:95px;height:95px;text-align: center;color:red;position: absolute;right:15%;bottom: 40%;z-index:120">
          <p style="margin-top: 30px;">区块链上存证</p>
          <p>专用章</p>
        </div>
        <img src="../../assets/u1512.png" style="width:100%;height:100%;" />
        <div class="taimg" style="width:100%;height:100%;position: absolute;top:0;left:0">
          <h1 style="display: block;margin:0 auto;margin-top: 15%;font-size: 23px;width:200px;">电子数据存证证书</h1>
          <p style="width:100%;text-align: center;height:3%;margin-top: 5%;font-size:10px;">存证编号：CZ2021072109551969276929
          </p>
          <p style="width:60%;display: block;margin:2% auto;">区块链存证ID：0xc6966ca53fb0d3</p>
          <p style="width:60%;display: block;margin:2% auto;">数据指纹hash：0xc6966ca53fb0d3</p>
          <p style="width:60%;display: block;margin:2% auto;">存证名称：我的作品</p>
          <p style="width:60%;display: block;margin:2% auto;">存证类型：司法存证</p>
          <p style="width:60%;display: block;margin:2% auto;">内容类型：文件类型</p>
          <p style="width:60%;display: block;margin:2% auto;">存证主体：张一三</p>
          <p style="width:60%;display: block;margin:2% auto;">存证时间:2021年06月01日16时44分52秒</p>
          <p style="width:60%;display: block;margin:2% auto;">区块高度:31241515</p>
          <p style="width:60%;display: block;margin: auto;font-size: 12px;margin-top: 5%;">证书说明：</p>
          <p style="width:60%;display: block;margin:0 auto;font-size: 12px;">

            1.本证书对应内容通过区块链进行存证，链上数据客观真实，不可篡改。
          </p>
          <p style="width:60%;display: block;margin:0 auto;font-size: 12px;">
            2.前往验证中心，可对本证书及证书附带的电子证据进行验证。
          </p>
        </div>
      </div>
    </div>
    </div>
</template>

<script setup lang="ts">
import { ArrowLeftBold } from '@element-plus/icons-vue'
import { reactive, toRefs, ref } from 'vue'
import { useRouter } from 'vue-router'
import html2canvas from "html2canvas";
const router = useRouter()
const poster = ref();
const visible1 = ref(false);
const dumpPage = () => {
    visible1.value = true
    setTimeout(() => {
        html2canvas(poster.value, {
            allowTaint: true,
            useCORS: true, // 允许跨域
            width: 450, //生成海报的w
            height: 600, //生成海报的h    默认是px
            dpi: 500,
            backgroundColor: "#fff",
        }).then((canvas) => {
            // canvas 其实就是我们所讲的res 的意思 返回报文的意思
            console.log(canvas);
            let baseImg = canvas.toDataURL("image/jpg");
            let save = document.createElement("a");
            save.href = baseImg;
            // 下载的名字
            save.download = "区域链证件";
            // 直接回调a的点击事件
            save.click();
        });
        visible1.value = false
    }, 800)
}
const state = reactive({
    circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl:
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    sizeList: ['small', '', 'large'] as const,
})
const { circleUrl } = toRefs(state)
const userInfoMsg = reactive({ name: "zs" }) // 存放用户信息
</script>

<style scoped>
.userinfo {
    padding: 62px 123px;
    background-color: #fff;
}

.footMsg {
    margin-top: 65px;
}

.infoTag {
    padding: 1px 2px;
    margin-right: 5px;
    background-color: #0079fe;
}

.box-msg {
    margin-top: 20px;
    padding: 20px 35px;
    border: 1px solid rgb(233, 233, 233);
    display: flex;
}

.box-pic {
    width: 10%;
}

.box-word {
    text-align: center;
}

.box-mid {
    width: 3%;
}

.box-list {
    width: 87%;
}

.box-foot {
    width: 93%;
    min-height: 150px;
    margin-top: 20px;
    padding: 20px 35px;
    border: 1px solid rgb(233, 233, 233);
}

.editIcon {
    cursor: pointer;
    position: relative;
    left: 180px;
    vertical-align: middle;
}

/* 头像 */
.demo-basic {
    text-align: center;
}

.demo-basic .sub-title {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
}

.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demo-basic .block:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}

.demo-basic .block {
    flex: 1;
}

.demo-basic .el-col:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}

.infoRight {
    float: right;
}

/* 身份证 */
.demo-image {
    display: inline-block;
}

.demo-image .block {
    padding: 10px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image .block:last-child {
    border-right: none;
}

.demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>